<template>
  <div class="cc-page-wrap">
    <el-row :gutter="12">
      <el-col :sm="24" :md="12" :lg="12">
        <div class="cc-page-card">
          <h3>基础折线图</h3>
          <Line1 key="Line1" chart-id="Line1" :chart-data="LineData" />
        </div>
      </el-col>
      <el-col :sm="24" :md="12" :lg="12">
        <div class="cc-page-card">
          <h3>折线图堆叠</h3>
          <Line2 key="Line2" chart-id="Line2" :chart-data="LineData" />
        </div>
      </el-col>
      <el-col :sm="24" :md="24" :lg="24">
        <div class="cc-page-card">
          <h3>定时任务</h3>
          <Line3 key="Line3" chart-id="Line3" :chart-data="LineDataTimer" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  onMounted,
  onUnmounted,
  reactive,
  ref
} from 'vue'

import Line1 from './components/Line1.vue'
import Line2 from './components/Line2.vue'
import Line3 from './components/Line3.vue'

import {
  echartData
} from './echartData'
export default defineComponent({
  name: 'LineChart',
  components: {
    Line1,
    Line2,
    Line3
  },
  setup() {
    // 数据
    const LineData = reactive(echartData)
    // 定时器
    const timers = ref()
    const LineDataTimer = reactive<any>({
      xdata: [],
      ydata: []
    })
    const timerdata = () => {
      LineDataTimer.xdata = []
      LineDataTimer.xdata = LineData.xdata
      LineDataTimer.ydata = []
      LineDataTimer.ydata = LineData.ydata.map((item: number) => {
        return Math.floor(Math.random() * (10 - 1) + 1) * item
      })
      // console.log(LineDataTimer,'LineDataTimer')
    }
    onMounted(() => {
      timerdata()
      timers.value = setInterval(() => {
        timerdata()
      }, 3000)
    })
    onUnmounted(() => {
      clearInterval(timers.value)
    })
    return {
      LineData,
      timers,
      LineDataTimer
    }
  }
})
</script>

<style lang="scss" scoped>

</style>
